<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <span @click="handleEmit">首页</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>评论管理</el-breadcrumb-item>
      <el-breadcrumb-item>我的评论</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{total}} 条评论</span>
        <!-- 分页功能 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryInfo.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryInfo.pagesize"
          layout="sizes, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>

      <!-- 添加评论盒子 -->
      <div class="addComment_box">
        <!-- 左边头像容器 -->
        <div class="avator_wrap">
          <img :src="$store.state.avator" alt />
        </div>
        <!-- 右边文本域盒子 -->
        <div class="textarea_wrap">
          <!-- 文本域 -->
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
          <!-- 提交按钮 -->
          <button @click="addComment">提交评论</button>
        </div>
      </div>

      <!-- 我的评论盒子 -->
      <div class="myComment_box" v-for="(item, index) in commentList" :key="index">
        <!-- 左边头像容器 -->
        <div class="avator_wrap">
          <img :src="http + item.user.avator" alt />
        </div>
        <!-- 右边评论信息容器 -->
        <div class="comment_wrap">
          <!-- 用户名行 -->
          <div class="username">{{item.user.username}}</div>
          <!-- 评论内容行 -->
          <div class="content">{{item.content}}</div>
          <!-- 发表时间行 -->
          <div class="createAt">
            {{index + 1}}楼 {{item.createAt | dateFormat}}
            <!-- 删除评论下拉按钮 -->
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                删除
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="item._id" icon="el-icon-delete">删除评论</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <!-- 展示已存在的回复数据的盒子 -->
          <div class="response_box" v-if="item.response">
            <!-- 回复行：左边头像容器 -->
            <div class="res_avator_wrap">
              <img :src="http + item.response.user.avator" alt />
            </div>
            <!-- 回复行：右边评论信息容器 -->
            <div class="res_comment_wrap">
              <!-- 用户名行 -->
              <div class="res_username">
                {{item.response.user.username}}
                <span class="res_content">{{item.response.content}}</span>
              </div>
              <!-- 发表时间行 -->
              <div class="res_createAt">
                <span class="time">{{item.response.createAt | dateFormat}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      http: 'http://127.0.0.1',
      // 分页参数
      queryInfo: {
        pagenum: 1,
        pagesize: 5
      },
      // 评论列表数据
      commentList: [],
      // 数据总条数
      total: 0,
      // 评论内容
      textarea: ''
    }
  },
  created() {
    this.getCommenntList()
  },
  methods: {
    // 点击面包屑首页的时候，让父组件清空侧边栏选中
    handleEmit() {
      this.$emit('handleNavChange')
    },
    // 获取当前登陆用户的0层评论列表数据
    async getCommenntList() {
      const { data: res } = await this.$http.get('comments/' + window.localStorage.getItem('uid'), {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取评论数据失败')
      }
      console.log(res.comments)

      // 给data中的数据赋值
      this.commentList = res.comments.records
      this.total = res.comments.total
    },
    // 每页显示条数改变
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getCommenntList()
    },
    // 当前页数改变
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getCommenntList()
    },
    // 点击了删除按钮
    async handleCommand(command) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该评论, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除操作')
      }
      // 确定删除，发送请求
      const { data: res } = await this.$http.delete('comments/' + command)
      if (res.meta.status !== 200) {
        return this.$message.error('删除评论失败')
      }
      // 删除成功，给出提示
      this.$message.success('删除评论成功')
      this.getCommenntList()
    },

    // 确定提交评论
    async addComment() {
      // console.log(this.uid, this.textarea)
      if (this.textarea.trim().length === 0) {
        return this.$message.error('评论不能为空')
      }
      // 发送请求
      const { data: res } = await this.$http.post('comments/' + this.uid, {
        content: this.textarea
      })
      if (res.meta.status !== 201) return this.$message.error('提交评论失败')
      this.$message.success('提交评论成功')
      this.getCommenntList()
      this.textarea = ''
    }
  }
}
</script>

<style lang="less" scoped>
.addComment_box {
  display: flex;
  margin-bottom: 30px;
  padding-right: 430px;
  .avator_wrap {
    width: 80px;
    text-align: center;
    img {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid #ccc;
    }
  }
  .textarea_wrap {
    display: flex;
    flex: 1;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    button {
      width: 70px;
      height: 54px;
      padding: 4px 15px;
      margin-left: 15px;
      font-size: 14px;
      color: #fff;
      border-radius: 4px;
      text-align: center;
      min-width: 60px;
      vertical-align: top;
      cursor: pointer;
      background-color: #00a1d6;
      border: 1px solid #00a1d6;
      transition: 0.1s;
      user-select: none;
      outline: none;
    }
    button:hover {
      opacity: 0.9;
    }
  }
}

.myComment_box {
  display: flex;
  padding-right: 430px;
  margin-bottom: 15px;
  .avator_wrap {
    width: 80px;
    display: flex;
    justify-content: center;
    img {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid #ccc;
    }
  }
  .comment_wrap {
    flex: 1;
    border-bottom: 1px solid #ccc;
    padding-bottom: 12px;
    .username {
      color: #6d757a;
      padding: 5px 0;
      font-size: 14px;
      font-weight: 700;
    }
    .content {
      padding: 5px 0;
    }
    .createAt {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      font-size: 12px;
      color: #99a2aa;
      span {
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }
}

.response_box {
  display: flex;
  margin-top: 5px;
  .res_avator_wrap {
    width: 40px;
    text-align: center;
    img {
      width: 24px;
      height: 24px;
      border: 1px solid #ccc;
      border-radius: 50%;
      margin-top: 5px;
    }
  }
  .res_comment_wrap {
    flex: 1;
    .res_username {
      width: 100%;
      color: #6d757a;
      padding: 5px 0;
      font-size: 12px;
      font-weight: 700;
      .res_content {
        width: 100%;
        font-size: 14px;
        color: #333;
        font-weight: normal;
        padding-left: 15px;
      }
    }
    .time {
      font-size: 12px;
      color: #99a2aa;
      padding: 5px 0;
    }
  }
}

.el-dropdown-link {
  font-size: 12px;
  cursor: pointer;
  color: #333;
}
.el-dropdown-link:hover {
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
